<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件</title>
    <script src="js/vue.js"></script>
    <style>
        .itemStyle{
            border: 1px dashed #000;
            border-radius: 15px;
            padding: 10px;
            width: 220px;
            height: 230px;
            text-align: center;
            float: left;
            margin-right: 50px;
            margin-bottom: 50px;
            box-shadow:10px 10px 5px #888888;

        }

        .itemFont{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis; 
            line-height: 32px;
        }



    </style>
</head>
<body>
    <template id="listTemplate">
        <div>
            <div style="background-color: greenyellow; margin-top: 30px;margin-left: 10px;">
                {{msg}}
            </div>
            <div>
                <lessionitem
                    pic="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=469681623,1592098288&fm=26&gp=0.jpg"
                    title="第一阶段：Java核心编程"
                    desc="知识要点：环境搭建，基本数据类型，变量及去声明，运算符，流程控制语句，IDE绘制界面"
                    headimg="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=469681623,1592098288&fm=26&gp=0.jpg"
                    tname="哈王子"
                    count="100"
                    @event="getVal">
                </lessionitem>
                <lessionitem
                    pic="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2424968239,3544182751&fm=26&gp=0.jpg"
                    title="第四阶段：Web前端框架"
                    desc="知识要点：Bootstrap前端框架、VUE前端框架"
                    headimg="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=469681623,1592098288&fm=26&gp=0.jpg"
                    tname="帅狗子"
                    count="10"
                    @event="getVal">
                ></lessionitem>
            </div>
            
        <div>
    </template >

    <template id="itemTemplate">
        <div class="itemStyle">
            <div>
                <img :src="pic" width="200px" height="114px">
            </div>
            <div>
                <div class="itemFont">
                    {{title}}
                </div>
                <div class="itemFont" style="color:#999">
                    {{desc}}
                </div>
                <div style="color:red;text-align: right;margin-right: 15px; margin-bottom: 5px;">

                    <a @click="appointment">预约课程</a>

                </div>
                <div>
                    <img :src="headimg" width="20px" height="20px" style="float: left;">
                    <span style="float: left;">{{tname}}</span>
                    <span style="margin-right: -10px;">{{count}}</span>
                </div>
            </div>
        </div>       
    </template>
    
    <div id="app">
        <lessionlist></lessionlist>
    </div> 

</body>
</html> 
<script>
    var vm = new Vue({
        el:'#app',
        components:{
            'lessionlist':{
                template:'#listTemplate',
                data() {
                    return {
                        msg:''
                    }
                },
                methods: {
                  
                    getVal(val){
                        var content=val;
                        var array=content.split(",");
                        var tname=array[0];
                        var lessionName=array[1];
                        var count=parseInt(array[2]);
                        var message="您已经成功的预约了"+tname+"老师的"+lessionName+";目前该课程已约人数为"+(parseInt(count+1))+"人";
                        this.msg=message;
                        alert(message)
                    }
                },

                components:{
                    'lessionitem':{
                        template:'#itemTemplate',
                        props:["pic","title","desc","headimg","tname","count"],
                        methods: {
                            appointment(){
                               var tname = this.tname;
                               var title = this.title;
                               var count = this.count;
                               var result = tname+","+title+","+count; 
                               this.$emit('event',result);                         
                            }
                        },
                    }
                }
            }
        }

    })
</script>